<template>
    <div>
        <div class="filter-container text-center">
            <el-form label-position="left" :inline="true" >
                <el-form-item>
                    <el-radio-group v-model="chartDataField" fill="#E6A23C">
                        <el-radio-button label="roi">实际ROI</el-radio-button>
                        <el-radio-button label="roiMarket">市场ROI</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div id="roi-chart" :style="'width: 100%; min-height: '+maxHeight+'px;'"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import VXETable from "vxe-table";

export default {
    props: {
        search: {
            sourceMulti: '',
            day: [],
        }
    },
    data() {
        return {
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            downloadLoading: false,
            pageOptions: this.$store.state.backend.pageOptions,
            echartsInstance: null,
            echartsOption: {
                legend: {
                    data: [],
                    selected: {}
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                title: {
                    text: '走势对比图'
                },
                tooltip: {
                    trigger: 'axis',
                    // formatter: '{a0}<br/>第{b0}<br/>回本率: {c0}%'  // 显示百分比
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    // data: [],
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {  // 显示百分比
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                    show: true,
                    scale: true,
                    boundaryGap: [0, '100%'],
                },
                series: [],
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100
                }],
            },
            resizeTimeout: null,
            chartDataField: 'roi',
        }
    },
    computed: {
        maxHeight() {
            if (this.echartsInstance) {
                window.clearTimeout(this.resizeTimeout);
                this.resizeTimeout = setTimeout(this.echartsInstance.resize, 1000);
            }
            return this.$store.state.backend.windowInnerHeight - 250;
        },
    },
    watch: {
        chartDataField () {
            this.setChartOptions();
        }
    },
    methods: {
        handleSearch() {
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.loading = true;
            this.$store.dispatch('spreadData/SourceLtvRoiChart', filter).then(({data}) => {
                this.tableData = data.data;
                this.setChartOptions();
            }).finally(() => {
                this.loading = false;
            });
        },
        setChartOptions() {
            this.initChartOptions();
            let seriesData = {};
            let xAxisData = [];

            Object.keys(this.tableData).map(source => {
                Object.keys(this.tableData[source][this.chartDataField]).map(day => {
                    let xAxisTitle = parseInt(day) + 1 + '日';
                    xAxisData.includes(xAxisTitle) || xAxisData.push(xAxisTitle);
                    let tmp = (this.tableData[source][this.chartDataField][day]*100).toFixed(2);

                    if (seriesData[source] && seriesData[source].length) {
                        seriesData[source].push(tmp);
                    } else {
                        seriesData[source] = [];
                        seriesData[source].push(tmp);
                    }
                })
            });
            let series = [];
            let legend = [];
            Object.keys(seriesData).map(source => {
                let seriesOption = {
                    type: 'line',
                    smooth: true,
                    data: seriesData[source],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: function (a) {
                                    return a.data + "%";
                                }
                            }
                        }
                    },
                };
                seriesOption.name = VXETable.formats.get('formatAppSourceName')({
                    cellValue: source,
                });
                legend.push(seriesOption.name);
                series.push(seriesOption);
            })

            // 重新设置 不然数据会串
            let echartsOption = this.echartsOption;
            echartsOption.legend.data = legend;
            echartsOption.xAxis.data = xAxisData;
            echartsOption.series = series;
            this.echartsInstance.setOption(echartsOption, true);
        },
        // initSearchDate() {
        //     this.search.day = [
        //         moment().add(-1, 'M').unix(),
        //         moment().add(-1, 'd').unix(),
        //     ];
        // },
        initChart() {
            this.echartsInstance = echarts.init(document.getElementById('roi-chart'));
            this.initChartOptions();
            this.echartsInstance.on('click', function (params) {
                console.log(params);
            });
        },
        initChartOptions() {
            this.echartsOption.series = [];
            this.echartsOption.legend.data = [];
            this.echartsInstance.setOption(this.echartsOption);
        },
    },
    created() {
        // this.initSearchDate();
        this.handleSearch();
    },
    mounted() {
        this.initChart()
    },
    beforeDestroy() {
        this.echartsInstance.clear();
    },
}
</script>

<style lang="scss">

</style>

